<template>
<div class="apply-refund" v-if="orderDetails">
    <div class="apply-refund-nav">
        <img src="./img/vector.png" alt="" @click="goBack" />
        <span class="title">申请退款</span>
        <!-- <span class="submit-btn">提交</span> -->
    </div>
    <div class="apply-refund-center">
        <div class="item">
            <p class="title">
                <img src="./img/success.png" alt="" />
                <span>将退还项目：</span>
            </p>
            <p class="info">
                <span>美团外卖接单服务(有效期{{orderDetails.buy_month}}个月)</span>
                <span class="price">
                    <em class="t">原价</em><em>¥{{orderDetails.original_money}}</em>
                    <em>¥{{orderDetails.service_money}}</em>
                </span>
            </p>
            <!-- <p class="tips"><span>12个月2G流量充值</span><em>¥20.00</em></p>
            <p class="tips"><span>延长打印机保修期：223456445</span><em>-</em></p>
            <p class="tips"><span>店铺置休</span><em>-</em></p> -->
            <p class="refund">
                <span>实付<em>¥{{orderDetails.service_money}}</em></span>
                <span>预计退款<em>¥{{orderDetails.service_money}}</em></span>
            </p>
        </div>
        <!-- <div class="item">
            <p class="title">
                <img src="./img/error.png" alt="" />
                <span>不可退项目：</span>
            </p>
            <p class="tips"><span>12个月2G流量</span><em>¥20.00</em></p>
        </div> -->
        <div class="item">
            <p class="tit">退款理由</p>
            <div class="textarea">
                <textarea v-model="refundReason" placeholder="请输入您的退款理由" maxlength="100"></textarea>
                <span class="nums">{{ refundReason.length }}/100</span>
            </div>
        </div>
    </div>
    <div class="apply-refund-tips">
        <p>注意事项：</p>
        <p>1、退款金额为订单实际支付金额；</p>
        <p>2、退款款项将按照订单支付的支付路径原路退回，即：例如购买本服务时生成本订单时使用A微信支付，退款款项将自动退回A微信号钱包；</p>
        <p>3、退款款项将在24小时内到账，请注意查收。</p>
    </div>
    <div class="apply-refund-btn" @click="applyRefund()">提交退款申请</div>

    <!-- <div class="apply-refund-bottom" v-if="bottomShow">
        <span>您是否遇到问题无法解决</span>
        <em class="link">联系客服</em>
    </div> -->
    <!-- <Dialog v-if="dialogPop" @close="closeDialog()" @confirm="confirmDialog()" :config="dialogConfig">
        <template v-if="isSuccess">
            <div class="success-icon">
                <img src="./img/success_icon.png" alt="" class="" />
            </div>
        </template>
    </Dialog> -->
    <loading v-if="isLoading"></loading>
</div>
</template>

<script>
import {
    apiUrl,
    getRequest
} from "@util/index";
import request from "@util/request";
import qs from "qs";
import loading from "./../components/loading/index.vue";
import Dialog from "./../components/Dialog/index.vue";
import {
    Toast
} from 'vant';
export default {
    data() {
        return {
            refundReason: "",
            bottomShow: true,
            screenHeight: window.innnerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
            originHeight: window.innnerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
            dialogPop: false,
            dialogConfig: null,
            isLoading: false,
            isSuccess: false, //请求成功
            orderDetails: null,
            param: null,
        };
    },
    components: {
        Dialog,
        loading,
    },
    watch: {
        screenHeight(val) {
            if (this.originHeight != val) {
                this.bottomShow = false;
            } else {
                this.bottomShow = true;
            }
        },
    },
    methods: {
        applyRefund() {
            if (this.orderDetails.refund_info) {
                Toast({
                    message: '该订单已退款,不能重复操作',
                    position: 'top',
                    duration: 1000,
                    onClose: () => {
                        location.href = `buyDetail.php?id=${this.orderDetails.id}`
                    }
                })
                return
            }
            if (this.refundReason == "") {
                Toast({
                    message: '请输入您的退款理由',
                    position: 'top',
                    duration: 1000,
                })
                return
            }
            let data = {
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_clientRequestRefund",
                    pay_order_no: this.orderDetails.id,
                    refund_reason: this.refundReason

                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            };
            request(data).then((res) => {
                if (res.data.ret == 0) {
                    Toast({
                        message: '提交成功',
                        position: 'top',
                        duration: 500,
                        onClose: () => {
                            location.href = `buyRefundDetail.php?id=${this.orderDetails.id}`
                        }
                    })
                } else {
                    Toast({
                        message: res.data.msg,
                        position: 'top',
                        duration: 1000,
                    })
                }

            });

        },
        goBack() {
            window.location.href = `buyDetail.php?id=${this.orderDetails.id}`
        },
        // openDialog() {
        //     this.dialogPop = true;
        //     this.dialogConfig = {
        //         title: "确定要提交退款申请吗？",
        //         details: "提交后，客服将在7个工作日内审核。审核通过后退款。",
        //         confirm: "确定",
        //         cancel: "取消",
        //     };
        // },
        closeDialog() {
            this.dialogPop = false;
            this.isSuccess = false
        },
        // confirmDialog() {
        //     if (!this.isSuccess) {
        //         this.isLoading = true;
        //         setTimeout(() => {
        //             this.isLoading = false;
        //             this.isSuccess = true
        //             if (this.isSuccess) {
        //                 this.dialogPop = true;
        //                 this.dialogConfig = {
        //                     title: "退款申请已提交",
        //                     details: "您的退款申请已提交成功，工作人员将在<span class='red'>3个工作日</span>内处理退款，请耐心等候。",
        //                     confirm: "确定",
        //                 };
        //             }
        //         }, 1000);
        //     }
        //     this.closeDialog();
        // },
        initPage() {
            let data = {};
            data.action = "ShopService_getOrderDetail";
            data.id = this.param.id;
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: data,
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let data = res.data.data;
                this.orderDetails = data;
            });
        },
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.screenHeight =
                    window.innnerHeight ||
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
            })();
        };
        this.param = getRequest()
        this.initPage()
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
